<template>
    <div class="media-center">
    <el-container>
        <el-aside width="240px" class="leftMain">
          <div class="main-title">{{ $t('目录管理') }}</div>
            <Tree showMinType="2" @click="handleTreeClick"></Tree>
        </el-aside>
        <el-main class="rightMain">
          <bs-main height="100%">
            <Condition slot="header" @add="handelAddTemplate" @search="handleSearch"></Condition>
            <list
              height="calc( 100% - 15px )"
              ref="list"
              class="center"
              :showIndex="true"
              :table-tag="tableName"
              :list-data="mediaData"
              :has-select="false"
              :list-cols="listCols"
              :init-cols-props.sync="initColsProps"
              :init-headmune-flag="initHeadmuneFlag"
              :action-opts="actionOpts">
              <template slot="actionSlot" slot-scope="{ row }">
                <el-button @click.native="handelEditTemplate(row)" size="mini" type="primary" v-has="'NEWS_TEMPLATE_UPDATE'">编辑</el-button>
                <el-button @click.native="handelPreviewTemplate(row)" size="mini">预览</el-button>
                <el-button @click.native="handelRemoveTemplate(row)" size="mini" type="danger" v-has="'NEWS_TEMPLATE_DELETE'">删除</el-button>
            </template>
            </list>
            <pagination slot="footer" :total="pageData.total" :page="pageData.page" :limit="pageData.limit" :showAllChecked="false" :allChecked="allSize" @all="handleChangeAllSize" @pagination="doList"></pagination>
          </bs-main>
        </el-main>
    </el-container>
    <!-- 新闻编辑窗口 -->
    <TemplateDiyDialog :visible.sync="showNewsDiyDialog" :type="pageType" :id="rowID" :folder="queryData.folderId" @close="doList"></TemplateDiyDialog>
    <!-- 预览窗口 -->
    <PreviewDialog :visible.sync="showPreviewDialog" :pre-data="previewData"></PreviewDialog>
  </div>
</template>

<script>
import TemplateDiyDialog from './components/TemplateDiyDialog.vue'
import PreviewDialog from '../../media/components/PreviewDialog.vue'
import Condition from './components/Condition.vue'
import Tree from '../components/NewsTree.vue'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import NewsApi from '@/api/news.js'

export default {
    data() {
        return {
            mediaData: [],
            tableName: 'NewsTemplateTable',
            listCols: [
                {label: '模板名称', prop: 'name'},
                {label: '创建人', prop: 'width'},
                {label: '创建时间', prop: 'createdAt'},
            ],
            initColsProps: ['name', 'width', 'height', 'createdAt'],
            actionOpts: {
                show: true,
                align: 'center',
                width: '120px',
                hidEditBtn: true,
                hidDelBtn: true,
                name: '操作',
                slot: true,
            },
            initHeadmuneFlag: false,
            pageData: {
                page: 1,
                total: 0,
                limit: 15
            },
            queryData: {
                folderId: '0'
            },
            allSize: false,
            showNewsDiyDialog: false,
            showPreviewDialog: false,
            pageType: '2',
            rowID: '0',
            previewData: {}
        }
    },
    components: {
        List, Pagination, Condition, Tree, TemplateDiyDialog, PreviewDialog
    },
    mounted() {
        this.$nextTick(() => {
            this.doList({page:1})
        })
    },
    methods: {
        // 查询列表
        async doList(current) {
            if(current) {
                this.pageData = {
                ...this.pageData,
                ...current
                }
            }
            var queryData = this.queryData
            queryData.current = this.pageData.page
            queryData.size = this.pageData.limit
            queryData.folderId = this.queryData.folderId
            const res = await NewsApi.templateList(queryData)
            if(res) {
                this.mediaData = res.records || []
                this.pageData.total = Number(res.total? res.total: 0)
            }
        },
        handleTreeClick(data) {
            this.queryData.folderId = data.id
            this.doList({page:1})
        },
        // 选择所有页
        handleChangeAllSize(val) {
            this.allSize = val
            this.$refs.list.clearSelection();
        },
        getActiveItem() {
            let items = this.$refs.list.getActiveItem()
            return items.length === 1 ? items[0] : items.length === 0 ? null : items
        },
        handelAddTemplate(type) {
            this.rowID = 0
            this.pageType = '2'
            this.showNewsDiyDialog = true
        },
        handelEditTemplate(row) {
            this.rowID = row.id
            this.pageType = '2'
            this.showNewsDiyDialog = true
        },
        async handelRemoveTemplate(row) {
            const res = await this.$confirm('提示', '确定要删除吗？')
            if(res) {
                await NewsApi.deleteTemplate({ ids: row.id })
                this.$message.success('删除成功')
                this.doList({page:1})
            }
        },
        handelPreviewTemplate(row) {
            this.previewData = {
                path: row.thumbnailFile,
                showType: 1,
                name: row.name,
                type: `${row.width}*${row.height}`,
                createdAt: row.createdAt
            }
            this.showPreviewDialog = true
        },
        handleSearch(data) {
            this.queryData = {
                ...this.queryData,
                ...data
            }
            this.doList({page:1})
        }
    }
}
</script>
